<extend name="layout/main" />

<block name="HEADER">
	<script type="text/javascript" src="__PUBLIC__/lib/echarts.min.js"></script>
	<style>
		.wrapper-title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			background-color: #eee;
			margin-top: 30px;
			
		}
		.mychart{
			height: 85%;
		}
	</style>
</block>

<block name="CONTENT">
	<div class="wrapper">
		<div class="panel-heading">
			<control:search id="searchs" />
		</div>
		<div class="content">
			<div class="layui-col-md12 layui-col-sm12" style="height: 100%;">
				<div class="wrapper-title">营业数据</div>
				<div id="chart" class="mychart"></div>
			</div>
		</div>
	</div>
</block>

<block name="FOOTER">
	<script type="text/javascript">
		var page = (function (ns) {
			
			//页面初始化
			ns.init = function () {
				ns.query()
			}

			ns.query = function () {
				var data = searchs.getData();
				var params = {};
				data.forEach(function(item){ params[item.field] = item.value });
				$.ajaxs('/admin/v1/finance/turnover', params, function (res) {
				 	ns.loadLineEchart(res.data.x, res.data.y);
				});
//				var xArr = [ '1', '2', '3', '4','11','11','11','11','11','11','11','11','11','11','11','11','11','11','11','11','11','11','11' ]
				//var yArr = [ 1000, 1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000  ]
//				ns.loadLineEchart(xArr,yArr)
			}

			//加载折线图
			ns.loadLineEchart = function (xArr, yArr) {
				var lineOption = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: { color: '#999' }
						}
					},
					xAxis: {
						type: 'category',
						data: xArr,
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: yArr,
						type: 'line',
						symbol: 'circle',
						symbolSize: 16,

						lineStyle: {
							color: '#5470C6',
							width: 4
						},
						itemStyle: {
							borderWidth: 3,
							borderColor: '#5470C6',
							color: '#5470C6'
						}
					}],
					//设置网格属性
					grid: {
						left: '5%', //网格距离容器左侧的距离
						right: '5%', //网格距离容器右侧的距离
						bottom: "8%",
						borderWidth: 1,
						show: false
					},
					backgroundColor: "#FEFEFE"
				}
				echarts.init(document.getElementById("chart")).setOption(lineOption, true);
			}

			return ns;
		}({}));

		$(function () { page.init() });

	</script>
</block>